<template>
    <div class="wrap">
        <div class="chat-header">
            <div class="chat-header-left">
                <div class="item-system">
                    <span class="circle cir1"></span>访客系统
                </div>
                <div class="item-system">
                    <span class="circle cir2"></span>无人车预约系统
                </div>
                <div class="item-system">
                    <span class="circle cir3"></span>会议室预约系统
                </div>
            </div>
            <div class="chat-header-right">
                <div class="item-system">
                    <span class="circle cir4"></span>停车位预约系统
                </div>
                <div class="item-system">
                    <span class="circle cir5"></span>行政物品借用系统
                </div>
            </div>
        </div>
        <div class="chat-body">
            <div class="chat-container">
                <div class="chat-title">桌面助理</div>
                <div ref="messageContainerRef" class="chat-messages">
                    <div
                        v-for="(message, index) in messages"
                        :key="index"
                        class="message"
                        :class="{ self: message.isMe }"
                    >
                        <div v-show="!message.isMe" class="avatar">AI</div>
                        <!--bca-disable-next-line-->
                        <div
                            class="bubble"
                            :class="{
                                outgoing: message.isMe,
                                incoming: !message.isMe,
                            }"
                            v-html="message.text"
                        ></div>
                        <div v-show="message.isMe" class="avatar">张</div>
                    </div>
                </div>
                <div class="chat-input">
                    <input
                        v-model="newMessage"
                        placeholder="Type a message..."
                        @keyup.enter="sendMessage"
                    />
                    <button @click="sendMessage">发送</button>
                </div>
            </div>
            <div v-show="aiTaskShow" class="form-container">
                <div class="chat-title">AI表单</div>
                <form
                    v-show="isFormShow"
                    class="dynamic-form"
                    @submit.prevent="handleSubmit"
                >
                    <div
                        v-for="(field, index) in formFields"
                        :key="index"
                        class="form-group"
                    >
                        <div class="input-container">
                            <label :for="field.name">{{ field.label }}:</label>
                            <input
                                v-if="
                                    field.type === 'text' ||
                                    field.type === 'date' ||
                                    field.type === 'tel' ||
                                    field.type === 'datetime-local'
                                "
                                :id="field.name"
                                v-model="formData[field.name]"
                                :type="field.type"
                                :placeholder="field.placeholder"
                            />
                            <input
                                v-if="field.type === 'number'"
                                :id="field.name"
                                v-model="formData[field.name]"
                                :type="field.type"
                                :placeholder="field.placeholder"
                            />

                            <textarea
                                v-else-if="field.type === 'textarea'"
                                :id="field.name"
                                v-model="formData[field.name]"
                                :placeholder="field.placeholder"
                                >{{ field.value }}</textarea
                            >

                            <select
                                v-else-if="field.type === 'select'"
                                :id="field.name"
                                v-model="formData[field.name]"
                            >
                                <option disabled select>请选择地址</option>
                                <option
                                    v-for="(
                                        option, optionIndex
                                    ) in field.options"
                                    :key="optionIndex"
                                    :value="option.value"
                                >
                                    {{ option.label }}
                                </option>
                            </select>
                            <span v-else-if="field.type === 'mark'">{{
                                field.value
                            }}</span>
                            <div
                                v-else-if="field.type === 'radio'"
                                class="radio-group"
                            >
                                <label
                                    v-for="(
                                        option, optionIndex
                                    ) in field.options"
                                    :key="optionIndex"
                                >
                                    <input
                                        :id="`${field.name}-${optionIndex}`"
                                        v-model="formData[field.name]"
                                        type="radio"
                                        :name="field.name"
                                        :value="option.value"
                                    />
                                    {{ option.label }}
                                </label>
                            </div>

                            <div
                                v-else-if="field.type === 'checkbox'"
                                class="checkbox-group"
                            >
                                <label
                                    v-for="(
                                        option, optionIndex
                                    ) in field.options"
                                    :key="optionIndex"
                                >
                                    <input
                                        :id="`${field.name}-${optionIndex}`"
                                        v-model="formData[field.name]"
                                        type="checkbox"
                                        :value="option.value"
                                    />
                                    {{ option.label }}
                                </label>
                            </div>
                            <div
                                v-if="field.type === 'mark'"
                                class="switch-group-system"
                            >
                                <span
                                    v-for="(system, index) in field.system"
                                    class="circle mr7"
                                    :class="system"
                                >
                                </span>
                            </div>
                            <div v-else class="switch-group-system">
                                <span
                                    v-for="(system, index) in field.system"
                                    class="circle mr10"
                                    :class="system"
                                >
                                </span>
                            </div>
                        </div>
                        <div v-if="field.validationError" class="error-message">
                            {{ field.validationError }}
                        </div>
                    </div>

                    <button type="submit" @click="doSure">确认预约</button>
                </form>
            </div>
            <div v-show="!aiTaskShow" class="task-container">
                <div class="chat-title">AI任务进展</div>
                <div class="task-content">
                    <div class="task-item">
                        <span class="checkmark"></span>
                        <span class="system">访客预约</span>
                        <span>请于明天下午2点前往前台接待访客</span>
                    </div>
                    <div class="task-item">
                        <span class="checkmark"></span>
                        <span class="system">停车位预约</span>
                        <span>百度大厦B-2/3位置</span>
                        <button @click="lookMap">查看地图</button>
                    </div>
                    <div class="task-item">
                        <span class="checkmark"></span>
                        <span class="system">无人车预约</span>
                        <span>请请乘坐时引导访客出示短信验证码</span>
                    </div>
                    <div class="task-item">
                        <span class="loading"></span>
                        <span class="system">会议室预订</span>
                        <span>当前西湖已被预订正在为您自动借用</span>
                        <button @click="doUnSure">修改会议室</button>
                    </div>
                    <div class="task-item">
                        <span class="loading"></span>
                        <span class="system">插线板借用</span>
                        <span>管理员审批中</span>
                        <button @click="doUnSure">催办</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
const formFields = ref([
    {
        name: "name",
        label: "访客姓名",
        type: "mark",
        value: "王经理",
        validationError: "",
        required: false,
        placeholder: "请输入访客名字",
        system: ["cir1", "cir2", "cir4"],
    },
    {
        name: "phone",
        label: "手机号码",
        type: "text",
        validationError: "",
        required: false,
        placeholder: "请输入联系方式",
        system: ["cir1", "cir2", "cir4"],
    },
    {
        name: "num",
        label: "到访人数",
        type: "number",
        // value: '',
        validationError: "",
        required: false,
        placeholder: "请输入到访人数",
        system: ["cir1", "cir2", "cir4"],
    },
    {
        name: "carmark",
        label: "是否需要停车",
        type: "select",
        options: [
            { label: "是", value: "是" },
            { label: "否", value: "否" },
        ],
        validationError: "",
        required: false,
        system: ["cir1", "cir4"],
    },
    // {
    //     name: 'num',
    //     label: '到访人数',
    //     type: 'number',
    //     value: 10,
    //     validationError: '',
    //      required: false,
    //     placeholder: '请输入到访人数',
    // },

    // {
    //     name: 'gender',
    //     label: '到访地点',
    //     type: 'select',
    //     options: [
    //         { label: '百度大厦', value: '百度大厦' },
    //         { label: '科技园', value: '科技园' },
    //         { label: '鹏寰大厦', value: '鹏寰大厦' },
    //     ],
    //     validationError: '',
    //      required: false,
    // },
    {
        name: "address",
        label: "到访地点",
        type: "mark",
        value: "百度大厦",
        system: ["cir1", "cir2", "cir4"],
    },
    {
        name: "meetingtime",
        label: "会议时间",
        type: "datetime-local",
        validationError: "",
        // value: '2023-10-25T15:00',
        required: false,
        placeholder: "请选择会议时间",
        system: ["cir1", "cir3"],
    },
    {
        name: "meetingmark",
        label: "预订会议室",
        type: "mark",
        value: "西湖会议室",
        system: ["cir3", "cir5"],
    },
    {
        name: "message",
        label: "备注",
        type: "textarea",
        validationError: "",
        required: false,
        placeholder: "请输入备注",
    },
    // {
    //     name: 'preferredColor',
    //     label: '颜色',
    //     type: 'radio',
    //     options: [
    //         { label: 'Blue', value: 'blue' },
    //         { label: 'Red', value: 'red' },
    //         { label: 'Green', value: 'green' },
    //     ],
    //     validationError: '',
    //     required: true,
    // },
    // {
    //     name: 'hobbies',
    //     label: '爱好',
    //     type: 'checkbox',
    //     options: [
    //         { label: 'Reading', value: 'reading' },
    //         { label: 'Gaming', value: 'gaming' },
    //         { label: 'Traveling', value: 'traveling' },
    //     ],
    //     validationError: '',
    //     required: false,
    // },
]);
const formData = reactive({});
const aiTaskShow = ref<boolean>(true);
formFields.value.forEach((field) => {
    formData[field.name] = "";
    console.log(field.name, ":", formData[field.name]);
});
const handleSubmit = () => {
    // Validate form fields
    formFields.value.forEach((field) => {
        field.validationError = "";
        if (field.required && !formData[field.name]) {
            field.validationError = `${field.label} is required.`;
        }
    });

    // Check if there are validation errors
    const hasErrors = formFields.value.some((field) => field.validationError);

    if (!hasErrors) {
        // Form is valid, you can submit the data or perform further actions
        console.log("Form submitted:", formData);
    } else {
        // Form has errors, handle accordingly
        console.log("Form has errors. Please correct them.");
    }
};
const doSure = () => {
    aiTaskShow.value = false;
};
const doUnSure = () => {
    aiTaskShow.value = true;
};
const lookMap = () => {
    window.open("http://meeting.baidu.com/map/855.jpg", "_bank");
};

// 上面的form表单区域的内容

const messageContainerRef = ref(null);
interface Message {
    text: string;
    isMe: boolean;
}
const isFormShow = ref<boolean>(false);
const messages = ref<Message[]>([]);
const newMessage = ref<string>(
    "我计划明天邀请快手IT团队王经理来百度大厦参观体验并试乘无人车，下午3点在西湖会议室进行商业洽谈",
);
// 电话是15776556252、人数6人、需要停车
// 会议室需要提前准备插排3个用于设备充电使用
const sendMessage = () => {
    if (newMessage.value.trim() !== "") {
        messages.value.push({
            text: newMessage.value,
            isMe: true,
        });
        // Simulate receiving a message from the other person
        if (newMessage.value.indexOf("王经理") > -1) {
            setTimeout(() => {
                messages.value.push({
                    text: "基于您的需求，已为您自动生成AI表单，您可以直接在右侧进行相关信息填写或直接对我说相关内容我会自动帮助您进行填写",
                    isMe: false,
                });
                setTimeout(() => {
                    isFormShow.value = true;
                }, 800);
            }, 500);
            formData["meetingtime"] = "2023-10-25T15:00";
            newMessage.value = "电话是15776556252、人数6人、需要停车";
        } else if (newMessage.value.indexOf("需要停车") > -1) {
            setTimeout(() => {
                messages.value.push({
                    text: "基于您的需求，已为您自动填写相关信息，如无其他额外需求请点击右侧确认预约或对我说确认预约",
                    isMe: false,
                });
                setTimeout(() => {
                    // 绑定默认值
                    // 电话是15776556252、人数6人、需要停车
                    formData["phone"] = "15776556252";
                    formData["num"] = "6";
                    formData["carmark"] = "是";
                }, 700);
            }, 500);

            newMessage.value = "会议室需要提前准备插排3个用于设备充电使用";
        } else if (newMessage.value.indexOf("插排") > -1) {
            setTimeout(() => {
                messages.value.push({
                    text: "基于您的新需求，右侧已为您自动更新相关需求表单,如无其他额外需求请点击右侧按键确认预约或对我说确认预约",
                    isMe: false,
                });
            }, 500);
            setTimeout(() => {
                // 会议室需要提前准备插排3个用于设备充电使用
                formFields.value.push({
                    name: "chapai",
                    label: "借用插排",
                    type: "mark",
                    value: "3个",
                    validationError: "",
                    required: false,
                    system: ["cir5"],
                });
            }, 700);

            newMessage.value = "确认预约";
        } else if (newMessage.value.indexOf("确认预约") > -1) {
            setTimeout(() => {
                messages.value.push({
                    text:
                        "好的，正在为您进行明日相关事宜预约，具体进展请关注右侧状态栏:" +
                        "<p>1.预约访客6人</p>" +
                        "<p>2.预约百度大厦停车位2个</p>" +
                        "<p>3.预约百度大厦无人车与下午2点30分试乘2辆</p>" +
                        "<p>4.预约百度大厦下午3点西湖会议室</p>" +
                        "<p>5.借用插排3个放置西湖会议室</p>",
                    isMe: false,
                });
                //
                aiTaskShow.value = false;
            }, 500);
            newMessage.value = "";
        } else {
            setTimeout(() => {
                messages.value.push({
                    text: "基于您的新需求，暂未找到相关解决方案，请联系管理员: sws@baidu.com",
                    isMe: false,
                });
            }, 500);
            newMessage.value = "";
        }
        // newMessage.value = '';
        // Scroll to the bottom when a new message is added
        scrollToBottom();
    }
};

const scrollToBottom = () => {
    const messageContainer = messageContainerRef.value;
    if (messageContainer) {
        messageContainer.scrollTop = messageContainer.scrollHeight;
    }
};
// Scroll to bottom on component mount
onMounted(scrollToBottom);
</script>

<style scoped lang="less">
.chat-header {
    padding: 10px 50px;
    text-align: right;
    // .chat-header-right,
    // .chat-header-left {
    //     text-align: center;
    // }
    .item-system {
        display: inline-block;
        width: 160px;
    }
}

.circle {
    display: inline-block;
    margin-right: 10px;
    width: 10px; /* 圆点的直径 */
    height: 10px; /* 圆点的直径 */
    border-radius: 50%; /* 使元素变成圆形 */
}

.cir1 {
    background-color: #2196f3; /* 设置圆点的颜色 */
}

.cir2 {
    background-color: #ff5722; /* 设置圆点的颜色 */
}

.cir3 {
    background-color: #67c23a; /* 设置圆点的颜色 */
}

.cir4 {
    background-color: #e6a23c; /* 设置圆点的颜色 */
}

.cir5 {
    background-color: #909399; /* 设置圆点的颜色 */
}

.chat-body {
    display: flex;
}

.task-content {
    padding: 10px;
    margin: 0 auto;
}

.loading-container,
.task-container,
.form-container {
    display: flex;
    margin-right: 15px;
    // padding: 10px;
    // border-radius: 5px;
    margin-left: 15px;
    height: calc(100vh - 80px);
    border: 1px solid #096dd9;
    flex: 1;
    flex-direction: column;
}

.chat-title {
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid #096dd9;
}

.chat-container {
    display: flex;
    // padding: 10px;
    // border-radius: 5px;
    margin-left: 15px;
    height: calc(100vh - 80px);
    border: 1px solid #096dd9;
    flex: 1;
    flex-direction: column;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.message {
    display: flex;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
}

.my-message {
    color: white;
    background-color: #4caf50;
    align-self: flex-end;
}

.chat-input {
    display: flex;
    padding: 10px;
    background-color: #f0f0f0;
}

input {
    flex: 1;
    padding: 10px;
    margin-right: 10px;
    border: none;
    border-radius: 20px;
    outline: none;
}

button {
    padding: 10px;
    color: white;
    background-color: #2196f3;
    border: none;
    border-radius: 20px;
    cursor: pointer;
}

.dynamic-form {
    padding: 10px;
    margin: 0 auto;
    max-width: 400px;
}

.form-group {
    margin-bottom: 20px;
}

label {
    /* display: block; */
    display: inline-block;
    margin-bottom: 5px;
    width: 120px;
    font-weight: bold;
}

.task-item {
    display: flex;
    margin: 20px;

    span {
        display: inline-block;
        padding: 5px;
    }

    .system {
        width: 120px;
        text-align: center;
        border: 1px solid #ccc;
    }
}

.input-container {
    display: flex;
    // flex-direction: column; /* Stack input elements vertically */
}

input {
    // width: 80%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

textarea {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

select {
    padding: 8px;
    height: 34px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.error-message {
    margin-top: 5px;
    color: red;
}

button {
    padding: 8px 15px;
    color: white;
    background-color: #2196f3;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0b7dda;
}

.checkmark::before {
    display: inline-block;
    margin-right: 5px; /* 可选：设置右侧间距 */
    font-size: 24px; /* 设置字体大小 */
    color: #0c0; /* 设置颜色 */
    content: "✓";
}

.loading {
    display: inline-block;
    margin-top: 8px;
    margin-right: 13px;
    width: 20px; /* 宽度 */
    height: 20px; /* 高度 */
    border: 4px solid #f3f3f3; /* 灰色边框 */
    border-radius: 50%; /* 将元素变为圆形 */
    border-top: 4px solid #3498db; /* 蓝色边框，控制旋转部分的颜色 */
    animation: spin 1s linear infinite; /* 旋转动画 */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    } /* 从0度到360度旋转 */
}

.switch-group-system {
    display: inline-block;
}

.mr7 {
    margin-top: 7px;
    margin-left: 5px;
}

.mr10 {
    margin-top: 10px;
    margin-left: 5px;
}

/* 用户头像 */
.avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    margin-left: 10px;
    width: 40px;
    height: 40px;
    background: #3498db; /* 用户头像背景色 */
    border-radius: 50%;
}

/* 消息气泡 */
.bubble {
    padding: 10px;
    max-width: 70%;
    border-radius: 15px;
}

/* 消息气泡 - 对方的消息 */
.bubble.incoming {
    color: #333;
    background: #f2f2f2; /* 对方的消息气泡颜色 */
    align-self: flex-start;
}

/* 消息气泡 - 自己发送的消息 */
.bubble.outgoing {
    background: #bddcf1 !important; /* 自己发送的消息气泡颜色 */
    align-self: flex-end;
}

/* 消息时间戳 */
.timestamp {
    margin-top: 5px;
    font-size: 12px;
    color: #888;
}

.self {
    justify-content: flex-end;
}

.me {
    background: #bddcf1 !important; /* 自己发送的消息气泡颜色 */
}
</style>
